$(function () {
    var gaugeOptions = {
        chart: {
            type: 'solidgauge'
        },
        title: null,
        pane: {
            center: ['50%', '85%'],
            size: '140%',
            startAngle: -90,
            endAngle: 90,
            background: {
                backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || '#EEE',
                innerRadius: '60%',
                outerRadius: '100%',
                shape: 'arc'
            }
        },
        tooltip: {
            enabled: false
        },
        // the value axis
        yAxis: {
            stops: [
                [0.1, '#55BF3B'], // green
                [0.5, '#DDDF0D'], // yellow
                [0.9, '#DF5353'] // red
            ],
            lineWidth: 0,
            minorTickInterval: null,
            tickPixelInterval: 400,
            tickWidth: 0,
            title: {
                y: -70
            },
            labels: {
                y: 16
            }
        },
        plotOptions: {
            solidgauge: {
                dataLabels: {
                    y: 5,
                    borderWidth: 0,
                    useHTML: true
                }
            }
        }
    };

    var labelFormat = function(text){
        return '<div style="text-align:center"><span style="font-size:14px;color:#666; display: block;">{y}</span>' +
                               '<span style="font-size:12px;color:silver">'+text+'</span></div>';
    }

    // The speed gauge
    $('#container-speed').highcharts(Highcharts.merge(gaugeOptions, {
        yAxis: {
            min: 0,
            max: 1000,
            title: {
                text: '平均响应时间'
            }
        },
        credits: {
            enabled: false
        },
        series: [{
            name: '平均响应时间',
            data: [0],
            dataLabels: {
                format: labelFormat('ms<br>(响应时间)')
            },
            tooltip: {
                valueSuffix: ' ms'
            }
        }]
    }));
    // The RPM gauge
    $('#container-rpm').highcharts(Highcharts.merge(gaugeOptions, {
        yAxis: {
            min: 0,
            max: 50000,
            title: {
                text: '调用次数'
            }
        },
        series: [{
            name: '调用次数',
            data: [0],
            dataLabels: {
                format: labelFormat('次<br>(响应次数)')
            },
            tooltip: {
                valueSuffix: ' 次'
            }
        }]
    }));

    $.ajax({
        url: '/apidoc/apiStats',
        type:"get",
        data:{
            invoker: window.invoker
        },
        contentType:false,
        success:function(data){
            if((!data.hasData) || data.invokeCount <= 0){
                $('.apistats').hide();
                return;
            }

            var chart = $('#container-speed').highcharts(),
                point,
                newVal,
                inc;
            if (chart) {
                point = chart.series[0].points[0];
                point.update(data.averageResponseTime);
            }
            // RPM
            chart = $('#container-rpm').highcharts();
            if (chart) {
                point = chart.series[0].points[0];
                point.update(data.invokeCount);
            }
            $('.apistats h1 .apistats-label').text(data.label);
        },
        error:function(e){
            console.log('Failed to load api stats data!');
        }
    });



});